import React from 'react'
import {Form, Row, Col, Modal, Input, Select, Tree, Button, Upload, Icon, message, Tooltip} from 'antd';
import API from "../../../axios/api";
import {beforeUpload, checkUploadFiles} from '../../../utils/utils'
import Table from '../../../components/Table'
import './form.less'

const { TextArea } = Input;

let id = 0

// @Form.create()
class ArticleForm extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            ArticleLabelList:[],
            tag:''
        };
    }

    componentDidMount(){
        this.initArticleLabelList()
    }   

    // 获取文章标签列表
    initArticleLabelList =  async () => {
        await API.fetchArticleLabelList().then((res) => {
            if(res.Code === 200) {
                this.setState({
                    ArticleLabelList: res.Data
                })
            }
        })
    }

  
    addItem = () =>{
        let tag = this.state.tag
        const parms = {
            LabelName:tag,
            LabelType:1
        }
        API.AddArticleLabel(parms).then((res) => {
            if(res.Code === 200) {
                message.success('添加成功！')
                this.initArticleLabelList()
                this.setState({
                    tag:''
                })
            }
            else message.error(res.Message)
        })
    }

    inputonchange = (e)=>{
        this.setState({
            tag:e.target.value
        })


        
    }

    render(){
        const { getFieldDecorator, getFieldValue } = this.props.form;

        const {
            modalKey,
            visible,
            title,
            fields,
            onCancel,
            onOk,
            okText,
            width,
            data
        } = this.props

        const columns = [
            { dataIndex: '', title: '序号', width: 60, render: (text, record,index) =>  <span>{index + 1}</span>},

            {
              title: '标签名',
              width: 100,
              dataIndex: 'ArticleLableName',
            },
          
          ];
          

        return (
            <Modal
                wrapClassName="form"
                key={modalKey}
                visible={visible}
                title={title}
                onCancel={onCancel}
                footer={null}
                width={width}
            >

                <Row gutter={24}>
                    <Col span={15} key="title" style={{ display: 'block' }}>
                        <Input
                            value={this.state.tag}
                            onChange={this.inputonchange}
                            placeholder="请输入标签名"
                            onPressEnter={this.addItem}
                            prefix={<Icon type="tag" style={{ color: 'rgba(0,0,0,.25)' }} />}
                        />,
                    </Col>

                       <Col span={3} key="title" style={{ display: 'block' }}>
                             <Button type="primary" onClick={this.addItem} >添加</Button>
                       </Col>
                </Row>

                <Table 
                    pagination={ true }
                    pageSize={10}
                    header={ columns}
                    data={ this.state.ArticleLabelList }
                    pageSize={5}
                />
               
            </Modal>
        )
    }
}
let formtagModalForm = Form.create()(ArticleForm)
export default formtagModalForm

